/* Sezione Consegna Gratuita */

.consegna-gratuita {

  background-color: #f0f8ff; /* Colore di sfondo chiaro */

  color: #2c3e50; /* Colore del testo scuro */

  text-align: center; /* Allineamento centrale */

  padding: 1vw; /* Padding interno */

  font-size: 1.5vw; /* Dimensione del font */

  border: 0px solid #2980b9; /* Bordo di colore blu */

  margin: auto; /* Margine sotto il div */

  border-radius: 5px; /* Angoli arrotondati */

}

/* grassetto consegna gratuita */

#Grassetto{

  background-color: #f0f8ff; /* Colore di sfondo chiaro */

  color: #2c3e50; /* Colore del testo scuro */

  text-align: center; /* Allineamento centrale */

  padding: 10px; /* Padding interno */

  font-size: 16px; /* Dimensione del font */

  font-weight: bold; /* Grassetto */

  border: 0px solid #2980b9; /* Bordo di colore blu */

  margin: auto; /* Margine sotto il div */

  border-radius: 5px; /* Angoli arrotondati */

}

.icon-furgoncino {

    width: 2vw; /* Larghezza dell'icona */

    height: auto; /* Altezza automatica per mantenere le proporzioni */

    vertical-align: middle; /* Allinea verticalmente l'immagine con il testo */

    margin-right: 1vw; /* Margine a destra per separare l'immagine dal testo */

}

/* header marchio ricerca e lingua */

.header {

    display: flex; /* Usa Flexbox per allineare gli elementi sulla stessa riga */

    align-items: center; /* Allinea verticalmente al centro */

    justify-content: space-between; /* Spaziatura uniforme tra gli elementi */

    padding: 1vw; /* Padding interno */



}



.logo {

    display: flex; /* Usa Flexbox per allineare logo e testo */

    align-items: center; /* Allinea logo e testo verticalmente */

    margin-left: 10vw;

}



.logo img {

    width: 5vw; /* Imposta la larghezza del logo */

    height: auto; /* Mantieni le proporzioni del logo */

    margin-right: 1vw; /* Margine a destra per separare il logo dal testo */

}

/* noe ditta */

/* Contenitore per il testo (nome ditta + slogan) */

.logo-text {

    display: flex;

    flex-direction: column; /* Dispone il nome e lo slogan in colonna */

    align-items: flex-start; /* Allinea il testo a sinistra (o usa center per centrare) */

}



/* Nome della ditta */

.nome-ditta {

    color: black;

    font-family: 'Montserrat', sans-serif;

    font-size: 2vw;

    font-weight: bold;

    margin: 0; /* Rimuove i margini predefiniti */

}



/* Slogan */

.slogan {

    color: gray;

    font-family: 'Montserrat', sans-serif;

    font-size: 1vw;

    font-weight: normal;

    margin-top: 0.2em; /* Distanza tra il nome e lo slogan */

}

.search-container {

    display: flex;

    align-items: center; /* Allinea verticalmente gli elementi al centro */

    justify-content: center; /* Centra la barra di ricerca orizzontalmente */

    margin: 0 auto; /* Centra la barra rispetto al contenitore */

    width: 60vw; /* Rende la barra più lunga */

    gap: 1vw; /* Spaziatura uniforme tra gli elementi */

}



.search-container input {

    padding: 1vw; /* Spaziatura interna */

    border: 1px solid #2980b9;

    border-radius: 5px;

    width: 100%; /* Occupa tutto lo spazio disponibile nel contenitore */

    font-size: 1vw;

}



/* Bandiera e testo "Made in Italy" */

.made-in-italy {

    margin-left: 0.5vw; /* Riduci il margine per avvicinarlo alla bandiera */

    font-style: italic;

    font-weight: 300;

    font-size: 1.3vw; /* Rendi il testo più piccolo */

    color: #000;

    display: flex; /* Allinea il contenuto in linea con la bandiera */

    align-items: center; /* Centra verticalmente il testo con la bandiera */

    white-space: nowrap; /* Impedisce che il testo vada su più righe */

    margin-right: 13vw;

}



.bandiera-italiana {

    width: 2vw;

    height: auto;

    margin-right: 0.5vw;

    vertical-align: middle;

}



/* Media Query per schermi più piccoli (mobile) */

@media (max-width: 768px) {

    /* Consegna gratuita */

    .consegna-gratuita {

        font-size: 4vw; /* Aumenta la dimensione del font per mobile */

        padding: 2vw; /* Aumenta il padding */

    }



    #Grassetto {

        font-size: 4vw; /* Aumenta la dimensione del font */

        padding: 2vw; /* Aumenta il padding */

    }



    .icon-furgoncino {

        width: 5vw; /* Aumenta la dimensione dell'icona */

        height: auto;

        margin-bottom: 1vw; /* Spazio sopra il logo */

    }



    /* Header */

    .header {

        display: flex;

        justify-content: space-between; /* Distribuisce gli spazi tra i contenuti */

        align-items: center;

        width: 100%; /* Occupa tutta la larghezza disponibile */

        gap: 2vw; /* Spaziatura tra gli elementi */

    }



    /* Logo e Nome ditta */

    .logo {

        display: flex;

        align-items: center;

        justify-content: flex-start; /* Allinea a sinistra */

        width: 50%; /* 50% per il logo e nome */

    }



    .logo img {

        width: 14vw; /* Aumenta la larghezza del logo */

        height: auto;

    }



    .logo-text {

        text-align: left; /* Allinea il testo a sinistra */

        margin-left: 1vw; /* Aggiungi margine a sinistra */

    }



    .nome-ditta {

        font-size: 8vw; /* Aumenta la dimensione del nome per mobile */

        margin: 0;

    }



    .slogan {

        font-size: 2.5vw; /* Aumenta la dimensione dello slogan */

        margin-top: 1vw;

    }



    /* Bandiera e testo "Made in Italy" */

    .made-in-italy {

        font-size: 2.2vw; /* Aumenta la dimensione del testo */

        margin-top: 1vw; /* Aggiunge spazio sopra */

        text-align: left; /* Allinea a destra */

        transform: translateX(-2vw); /* Sposta leggermente a sinistra */

    }



    .bandiera-italiana {

        width: 7vw; /* Aumenta la larghezza della bandiera */

        height: auto;

        margin-left: 0.5vw; /* Spazio a sinistra della bandiera */

    }



    /* Home Decor */

    .home-decor {

        font-size: 1.5vw; /* Ridimensiona "Home Decor" */

        margin-bottom: 1vw; /* Aggiunge margine sotto */

    }



    /* Barra di ricerca */

    .search-container {

        width: 100%; /* Barra di ricerca occupa tutta la larghezza */

        display: flex;

        justify-content: space-between; /* Spaziatura tra la barra di ricerca e il selettore lingua */

        align-items: center;

        margin-top: 2vw; /* Spazio sopra la barra di ricerca */

    }



    .search-container input {

        font-size: 4vw; /* Aumenta la dimensione del testo nella barra di ricerca */

        padding: 2vw; /* Aumenta il padding */

        width: 85%; /* La barra occupa la maggior parte dello spazio disponibile */

    }



    .lingua {

        font-size: 4vw; /* Aumenta la dimensione del testo */

        padding: 2vw;

        width: 12%; /* Riduce la larghezza del selettore lingua */

        text-align: center; /* Allinea il testo */

    }

}









/* Formattazione NAV */

nav {

    display: flex; /* Imposta il contenitore come flexbox */

    justify-content: center; /* Centra i link orizzontalmente */

    gap: 3vw; /* Spazio tra i link */

    background-color: #f1f1f1; /* Colore di sfondo (opzionale) */

    padding: 1vw; /* Aggiunge un po' di spazio interno (opzionale) */

    align-items: center; /* Allinea gli elementi verticalmente al centro */

}



.dropdown {

    position: relative; /* Posizione relativa per il contenitore del dropdown */

    display: inline-block; /* Visualizza come inline-block */

}



.dropbtn {

    background-color: inherit; /* Colore di sfondo trasparente */

    color: #6f6f6f; /* Colore iniziale del testo */

    padding: 10px 20px; /* Padding */

    font-size: 2vw; /* Dimensione del font */

    border: none; /* Nessun bordo */

    cursor: pointer; /* Cambia il cursore */

    text-decoration: none; /* Nessuna decorazione */

    white-space: nowrap; /* Evita la rottura del testo */

    transition: color 0.3s, background-color 0.3s; /* Transizioni morbide */

    outline: none; /* Rimuove il bordo di focus */

    font-family: 'Roboto', sans-serif; /* Usa il font Roboto per il testo */

    font-weight: 700; /* Imposta il font in grassetto */

  }



.dropbtn:hover {

    color: red; /* Il testo diventa rosso al passaggio del mouse */

    background-color: inherit; /* Mantiene il colore di sfondo trasparente */

}



/* Stile per il contenuto del dropdown */

/* Stile per il contenuto del dropdown */

.dropdown-content {

    display: none; /* Nascondi la lista di default */

    position: absolute; /* Posizionamento assoluto */

    background-color: #f9f9f9; /* Colore di sfondo */

    min-width: 600px; /* Ridotta la larghezza minima */

    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /* Ombra */

    z-index: 1; /* Sovrapposizione sopra altri elementi */

    display: flex; /* Layout flex per il posizionamento orizzontale */

    justify-content: flex-start; /* Riduce lo spazio tra colonne */

    gap: 10px; /* Ridotto lo spazio tra colonne */

    padding: 10px; /* Ridotto il padding interno */

}



/* Colonne del menu */

.column {

    flex: 1; /* Le colonne occupano lo stesso spazio */

    padding: 5px; /* Ridotto il padding interno */

    text-align: left; /* Allinea il testo a sinistra */

    font-size: 16px; /* Più grande del category-button */

}



/* Testo delle categorie */

.category-button {

    background: none; /* Nessuno sfondo */

    border: none; /* Nessun bordo */

    color: black; /* Colore del testo nero */

    font-weight: bold; /* Testo in grassetto */

    font-size: 17px; /* Dimensione del testo */

    text-align: left; /* Allineamento a sinistra */

    cursor: pointer; /* Cambia il cursore al passaggio del mouse */

    padding: 5px 8px; /* Aggiunge spazio intorno al testo */

    text-decoration: none; /* Rimuove la sottolineatura (se presente) */

    outline: none; /* Rimuove l'evidenziazione blu */

    display: block; /* Assicura che occupi tutta la larghezza della colonna */

    margin-bottom: 15px; /* Aumenta lo spazio sotto */

}



.category-button:hover {

    color: red; /* Cambia il colore del testo in rosso al passaggio del mouse */

    text-decoration: none; /* Assicura che non venga aggiunta la sottolineatura al passaggio del mouse */

}





/* Link del menu */

.dropdown-content a {

    color: black; /* Colore del testo */

    padding: 5px 8px; /* Ridotto il padding tra i link */

    text-decoration: none; /* Nessuna decorazione */

    display: block; /* Ogni link come blocco */

    font-family: "Times New Roman", Times, serif;

    font-size: 1.2rem; /* Ridotta la dimensione del testo */

    white-space: nowrap; /* Evita la rottura del testo */

    font-weight: normal; /* Rimuove il grassetto */

}



/* Hover sui link */

.dropdown-content a:hover {

    background-color: #f1f1f1; /* Sfondo al passaggio del mouse */

}







/* carrello */

.cart-icon {

  position: relative;

  display: inline-block;

  font-size: 24px; /* Dimensione dell'icona del carrello */

}



#cart-counter {

    position: absolute;

    top: -5px;

    right: -5px;

    background-color: red;

    color: white;

    font-size: 12px;

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-weight: bold;

}





/* Modale - Sfondo scuro */

/* Modale - Sfondo scuro */

.cart-modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

  opacity: 0; /* Inizialmente trasparente */

  transition: opacity 0.5s ease-in-out; /* Animazione dissolvenza */

  z-index: 9999; /* Assicura che il modale sia sopra tutti gli altri elementi */

}



/* Mostra il modale con fade-in */

.cart-modal.show {

  display: flex;

  opacity: 1; /* Opacità piena */

}





/* Contenitore del Modale */

.cart-modal-content {

  background: white;

  width: 60%; /* Finestra più grande */

  max-width: 500px; /* Aumentata la dimensione */

  padding: 25px;

  border-radius: 10px;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  text-align: center;

  position: relative;

}



/* Header del Modale */

.cart-modal-header {

  font-size: 22px; /* Testo più grande */

  font-weight: bold;

  margin-bottom: 15px;

}



/* Corpo del Modale */

.cart-modal-body {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

}



#cartModalImage {

  width: 120px;

  height: 120px; /* Stesso valore di width per avere un quadrato */

  border-radius: 5px;

  margin-right: 15px;

  object-fit: cover; /* Ritaglia l'immagine per riempire il quadrato */

  object-position: center; /* Centra l'immagine nel riquadro */

  display: block;

}







/* Testo prodotto */

.cart-modal-info {

  font-size: 20px; /* Testo più grande */

  font-weight: bold;

}



/* Footer - Bottoni */

.cart-modal-footer {

  display: flex;

  justify-content: space-between;

  margin-top: 15px;

}



/* Stile Pulsanti */

.cart-modal-footer button {

  padding: 8px 15px; /* Un po' più grandi per facilità d'uso */

  font-size: 16px;

  border: none;

  border-radius: 5px;

  cursor: pointer;

  transition: background 0.3s;

  background: #28a745; /* Entrambi verdi */

  color: white;

}



.cart-modal-footer button:hover {

  background: #218838;

}



/* Pulsante di chiusura */

.close-modal {

  position: absolute;

  top: 10px;

  right: 15px;

  font-size: 24px;

  cursor: pointer;

}









@media screen and (max-width: 600px) {

  .cart-modal-content {

    width: 85%; /* Più grande ma ancora adattato */

    max-width: 350px; /* Leggermente ingrandito */

    padding: 20px;

  }



  .cart-modal-header {

    font-size: 20px;

  }



  .cart-modal-body {

    flex-direction: column;

    align-items: center;

  }



  #cartModalImage {

    width: 100px;

    height: 100px;

    margin-bottom: 10px;

  }



  .cart-modal-info {

    font-size: 22px;

  }



  /* Aumento della dimensione del nome prodotto e del prezzo */

  .cart-modal-info h3 {

    font-size: 1.5em; /* Prova con 1.5em, puoi aumentare se serve */

  }



  .cart-modal-info p {

    font-size: 1.3em; /* Anche qui puoi testare valori più grandi */

  }



  .cart-modal-footer {

    flex-direction: column;

  }



  .cart-modal-footer button {

    width: 100%;

    padding: 10px;

    margin-top: 5px;

  }



  .close-modal {

    font-size: 22px;

    right: 10px;

    top: 5px;

  }

}











nav a {

    text-decoration: none;

    color: #6f6f6f;

    font-size: 2vw;

    font-family: 'Roboto', sans-serif; /* Usa il font Roboto per il testo */

    font-weight: 700;

    transition: color 0.3s; /* Aggiunge una transizione morbida quando cambia il colore */

    white-space: nowrap;

}



/* Cambia colore quando il link è selezionato, cliccato o attivo */

nav a:focus,

nav a:active {

    color: red;

}



/* Cambia colore quando l'utente passa il mouse sopra il link */

nav a:hover {

    color: red;

}

/* Sezione Prodotti */

section {

  padding: 2vw;

}

h2 {

  font-size: 2vw;

}

h3 {

  font-size: 1.8vw;

}

p {

  font-size: 1.2vw;

}



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');



h2 {



    color: #E07A5F;



    font-family: 'Playfair Display', serif;



    font-size: 2.5rem;



    font-weight: bold;



    position: relative;



    opacity: 0;



    transform: translateY(-20px);



    animation: fadeIn 1.2s ease-out forwards;



    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);



}







.underline {



    display: block;



    width: 60px;



    height: 4px;



    background-color: #E07A5F;



    margin: 8px auto;



    border-radius: 2px;



}







.arrow {



    font-size: 2rem;



    color: #E07A5F;



    margin-top: 15px;



    display: inline-block;



    animation: bounce 1.5s infinite;



}







@keyframes fadeIn {



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







@keyframes bounce {



    0%, 100% { transform: translateY(0); }



    50% { transform: translateY(10px); }



}



@media (max-width: 768px) {

    /* MENU A TENDINA */

    .dropdown-content {

        display: none; /* Nasconde il menu di default */

        flex-direction: column; /* Menu impilato verticalmente */

        min-width: 100%; /* Larghezza adattiva */

        position: absolute;

        background: white;

        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

        z-index: 10;

    }



    .dropdown-content a {

        padding: 10px;

        text-align: left;

        display: block;

    }



    /* NAVBAR: allineamento e dimensioni */

    nav {

        display: flex;

        justify-content: space-between; /* Allinea i pulsanti sullo stesso rigo */

        align-items: left;

        gap: 2vw; /* Mantiene lo spazio tra i tasti */

        flex-wrap: nowrap; /* Evita che vadano a capo */

    }



    nav a, .dropbtn {

        font-size: 3vw; /* Dimensione uniforme per i pulsanti */

        padding: 5px; /* Adatta lo spazio interno */

    }



    /* BARRA DI RICERCA */

    .search-container {

        width: 80vw; /* Occupa più spazio */

    }



    /* TESTI */

    .consegna-gratuita, .nome-ditta, h2, h3 {

        font-size: 3vw;

    }



    p {

        font-size: 2vw;

    }

}





.product-container {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;

    margin: 40px auto;

    max-width: 900px;

}

.product-image-gallery {

    text-align: center;

}

.main-image {

    width: 300px;

    border-radius: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    cursor: pointer;

}

.thumbnail-gallery img {

    width: 60px;

    height: 60px;

    object-fit: contain; /* Garantisce che l'immagine mantenga le sue proporzioni senza essere ritagliata */

    margin: 5px;

    cursor: pointer;

}

.product-details {

    max-width: 400px;

}





.description {

    font-size: 18px;

    color: #444;

    line-height: 1.6;

    font-style: italic;

}



.availability {

    color: green;

    font-weight: bold;

}

.price {

    font-size: 24px;

    font-weight: bold;

    color: red;

}

.old-price {

    text-decoration: line-through;

    color: gray;

    font-size: 18px;

    margin-left: 10px;

}

.quantity-selector {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 15px 0;

}

.quantity-btn {

    background-color: #ddd;

    border: none;

    padding: 5px 10px;

    cursor: pointer;

    font-size: 16px;

}

.add-to-cart {

    background-color: green;

    color: white;

    padding: 10px 20px;

    border: none;

    cursor: pointer;

    font-size: 18px;

    border-radius: 5px;

}



.add-to-cart:hover {

    background-color: #1e8449; /* Verde più scuro al passaggio del mouse */

}



/* Galleria di Immagini */

.gallery-modal {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    justify-content: center;

    align-items: center;

    z-index: 1000;

}

.gallery-modal img {

    max-width: 80%;

    max-height: 80%;

    border-radius: 10px;

}

.nav-btn {

    background-color: rgba(0, 0, 0, 0.5);

    color: white;

    border: none;

    font-size: 30px;

    padding: 20px;

    cursor: pointer;

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 1001;

}

.prev-btn {

    left: 0;

}

.next-btn {

    right: 0;

}

.close-btn {

    position: absolute;

    top: 20px;

    right: 20px;

    color: white;

    font-size: 40px;

    cursor: pointer;

    z-index: 1001;

}





@media (max-width: 768px) {

    .product-container {

        flex-direction: column; /* Dispone gli elementi in colonna */

        align-items: center;

        text-align: center;

        gap: 20px;

        max-width: 100%;

        margin: 20px auto;

    }



    .product-image-gallery {

        width: 100%;

    }



    .main-image {

        width: 90%; /* Riduce l'immagine principale per adattarsi */

        max-width: 300px;

    }



    .thumbnail-gallery img {

        width: 50px;

        height: 50px;

    }



    .product-details {

        width: 90%;

        max-width: 400px;

    }



    .availability {

        color: green;

        font-size: 17px;

        font-weight: bold;

    }



    .description {

        font-size: 16px; /* Testo leggermente più piccolo per dispositivi mobili */

    }



    .price {

        font-size: 22px;

    }



    .old-price {

        font-size: 16px;

    }



    .quantity-selector {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 5px;

        max-width: 90px; /* Riduce la larghezza complessiva */

        margin: 10px auto; /* Centra il selettore */

    }



    .quantity-btn {

        width: 28px; /* Pulsanti più piccoli */

        height: 28px;

        font-size: 14px;

        display: flex;

        align-items: center;

        justify-content: center;

        border: 1px solid #ccc;

        background-color: #f8f8f8;

        cursor: pointer;

        border-radius: 5px;

    }



    .quantity-input {

        width: 35px; /* Rende il campo numero più stretto */

        height: 28px;

        text-align: center;

        font-size: 14px;

        border: 1px solid #ccc;

        border-radius: 5px;

        appearance: textfield; /* Rimuove le freccette nei browser */

    }



    /* Nasconde le frecce per aumentare/diminuire nei browser che le mostrano */

    .quantity-input::-webkit-outer-spin-button,

    .quantity-input::-webkit-inner-spin-button {

        -webkit-appearance: none;

        margin: 0;

    }







    .add-to-cart {

        font-size: 16px;

        padding: 8px 15px;

    }

}



@media (max-width: 480px) {

    .main-image {

        width: 100%;

        max-width: 250px;

    }



    .thumbnail-gallery img {

        width: 40px;

        height: 40px;

    }



    .description {

        font-size: 14px;

    }



    .price {

        font-size: 20px;

    }



    .old-price {

        font-size: 14px;

    }



    .add-to-cart {

        font-size: 14px;

        padding: 6px 12px;

    }

}







/* Sezione Personalizzazione */



.customization-section {



    padding: 30px 20px; /* Ridotto il padding per avvicinare il contenuto */



    text-align: center;



    position: relative;



    background-color: transparent; /* Nessun sfondo */



    margin-top: 0px; /* Ridotto lo spazio tra il rettangolo Mensola e la sezione Personalizzazione */



}







/* Titolo "PERSONALIZZAZIONE" */



.customization-title {



    font-size: 150px; /* Molto grande */



    color: rgba(0, 0, 0, 0.1); /* Trasparente */



    margin-bottom: 10px;



    position: relative;



    z-index: 1; /* Assicurati che il testo non sia coperto */



    line-height: 1.1; /* Distanza più ridotta tra le righe */



}







.product-link {



    color: black; /* Colore del testo */



    text-decoration: none; /* Rimuove la sottolineatura */



}







.product-link:hover {



    color: blue; /* Cambia colore al passaggio del mouse */



}







.product-link:visited {



    color: black; /* Assicura che resti nero anche dopo il click */



}







.product-link:active {



    color: black; /* Evita cambiamenti di colore al click */



}







/* Effetto zoom sull'immagine */



.product-image {



width: 150px;



height: 150px;



object-fit: cover;



transition: transform 0.3s ease-in-out; /* Transizione fluida */



}







.product-image:hover {



transform: scale(1.1); /* Effetto zoom */



}







/* Testo di descrizione sopra la scritta "PERSONALIZZAZIONE" */



.customization-text {



    font-size: 20px;



    color: rgba(0, 0, 0, 0.8);



    position: absolute;



    top: 25%; /* Ridotto per avvicinare il testo alla scritta "PERSONALIZZAZIONE" */



    left: 50%;



    transform: translateX(-50%); /* Allinea perfettamente al centro */



    z-index: 2;



}







/* Pulsante di contatto */



.contact-button {



    display: inline-block;



    background-color: #2c3e50; /* Colore principale (grigio scuro) */



    color: white;



    padding: 10px 20px;



    font-size: 20px;



    border-radius: 5px;



    text-decoration: none;



    margin-top: 15px; /* Distanza ridotta tra il titolo e il pulsante */



}







.contact-button:hover {



  background-color: #27ae60; /* Colore verde al passaggio del mouse */



}



    /* Stile base già definito (non duplicato) */



    /* Media Query per Smartphone (max-width: 600px) */

@media (max-width: 600px) {

    section {

        margin: 10px; /* Riduci il margine per schermi piccoli */

    }



    .row {

        flex-direction: column; /* Disporre i prodotti in colonna */

        gap: 10px;

    }



    .row div {

        margin: 10px 0; /* Riduci margini laterali per prodotti */

    }



    .row img {

        width: 100px; /* Dimensioni immagine ridotte */

        height: 100px;

    }



    .highlight-section {

        flex-direction: column; /* Disporre immagine e testo in colonna */

        align-items: center; /* Centrare il contenuto */

        padding: 10px; /* Ridurre padding */

    }



    .highlight-image {

        width: 80%; /* Immagine più piccola */

        max-width: 300px; /* Limita larghezza massima */

        margin-bottom: 10px; /* Spazio tra immagine e testo */

    }



    .highlight-description {

        text-align: center; /* Centrare il testo */

        margin-left: 0; /* Rimuovi margine laterale */

    }



    /* Sezione Personalizza */

    .customization-section {

        display: flex;

        flex-direction: column; /* Disporre gli elementi in colonna */

        align-items: center; /* Centrare gli elementi */

        gap: 100px; /* Spazio tra gli elementi */

        padding: 20px 10px; /* Ridurre padding */

    }



    /* Titolo Personalizza */

    .customization-title {

        font-size: 8vw; /* Aumenta la dimensione del titolo */

        margin-bottom: 10px; /* Spazio sotto il titolo */

        text-align: center; /* Centra il titolo */

    }



    /* Testo descrittivo */

    .customization-text {

        font-size: 4vw; /* Aumenta la dimensione del testo */

        text-align: center; /* Centra il testo */

        margin-bottom: 20px; /* Spazio sotto il testo */

    }



    /* Pulsante Contattami */

    .contact-button {

        font-size: 4vw; /* Aumenta la dimensione del pulsante */

        padding: 8px 15px; /* Ridurre padding del pulsante */

        margin-top: 35px; /* Distanza dal testo */

        text-align: center; /* Centra il pulsante */

    }

}



/* Media Query per Tablet (min-width: 601px e max-width: 1024px) */

@media (min-width: 601px) and (max-width: 1024px) {

    section {

        margin: 15px; /* Margine intermedio per tablet */

    }



    .row {

        flex-wrap: wrap; /* Permetti ai prodotti di andare a capo */

        gap: 20px;

    }



    .row div {

        flex: 1 1 45%; /* Due prodotti per riga (45% ciascuno) */

        margin: 10px; /* Margine uniforme */

    }



    .row img {

        width: 120px; /* Dimensioni immagine intermedie */

        height: 120px;

    }



    .highlight-section {

        flex-direction: row; /* Mantieni disposizione in riga */

        align-items: flex-start;

        padding: 15px; /* Riduci padding */

    }



    .highlight-image {

        width: 40%; /* Adatta dimensione immagine */

        max-width: 400px;

    }



    .highlight-description {

        margin-left: 15px; /* Riduci margine */

    }



    /* Sezione Personalizza */

    .customization-section {

        display: flex;

        flex-direction: column; /* Disporre gli elementi in colonna */

        align-items: center; /* Centrare gli elementi */

        gap: 150px; /* Spazio tra gli elementi */

        padding: 25px 15px; /* Riduci padding per tablet */

    }



    /* Titolo Personalizza */

    .customization-title {

        font-size: 8vw; /* Dimensione titolo intermedia */

        margin-bottom: 10vw;

        text-align: center; /* Centra il titolo */

    }



    /* Testo descrittivo */

    .customization-text {

        font-size: 4vw; /* Adatta dimensione testo */

        margin-bottom: 10vw;

        text-align: center; /* Centra il testo */

    }



    /* Pulsante Contattami */

    .contact-button {

        font-size: 5vw; /* Dimensione pulsante intermedia */

        padding: 10px 18px;

        text-align: center; /* Centra il pulsante */

    }

}







/*pie di pagina*/



body {

            margin: 0;

            font-family: Arial, sans-serif;

        }



        footer {

            background-color: #f0f0f0;

            padding: 20px;

            border-top: 1px solid #ccc;

        }



        .footer-container {

            display: flex;

            justify-content: space-between;

            align-items: center;

            max-width: 1200px;

            margin: 0 auto;

        }



        .footer-box {

            flex: 1;

            padding: 10px;

            text-align: center;

        }



        .footer-box:not(:last-child) {

            border-right: 1px solid #ccc;

        }



        .footer-box h3 {

            margin: 0;

            font-size: 1.1rem;

            color: #333;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .footer-box h3 img {

            margin-right: 10px;

            width: 24px;

            height: 24px;

        }



        .footer-box p {

            margin: 5px 0 0;

            font-size: 0.9rem;

            color: #555;

        }



        .footer-lower {

            background-color: #e0e0e0;

            padding: 20px;

            border-top: 1px solid #bbb;

        }



        .footer-lower-container {

            display: flex;

            justify-content: space-between;

            max-width: 1200px;

            margin: 0 auto;

        }



        .footer-left, .footer-right {

            flex: 1;

            padding: 10px;

        }



        .footer-left {

            display: flex;

            flex-direction: column;

            align-items: flex-start;

        }



        .footer-left p {

            margin: 0 0 10px;

            font-size: 1rem;

            color: #333;

        }



        .footer-left p span {

            font-weight: bold;

            color: #007BFF;

            cursor: pointer;

        }



        .footer-left p span:hover {

            text-decoration: underline;

        }



        .footer-left .social-icons {

    display: flex;

    gap: 20px; /* Distanza tra le icone */

    margin-top: 20px; /* Spostate le icone ancora più in basso */

}



        .footer-left .social-icons a {

            text-decoration: none;

        }



        .footer-left .social-icons img {

            width: 32px;

            height: 32px;

        }



        .footer-right {

            display: flex;

            justify-content: space-between;

        }



        .footer-right ul {

            list-style: none;

            padding: 0;

        }



        .footer-right ul li {

            margin-bottom: 10px;

            font-size: 1rem;

            font-weight: bold;

            color: #333;

        }



        .footer-right ul li + li {

            margin-top: 10px;

        }





        .footer-button {

            display: inline-block;

            padding: 10px 15px;

            font-family: 'Roboto', sans-serif;

            font-size: 16px;

            font-weight: bold;

            color: white;

            background-color: #333;

            text-decoration: none;

            border-radius: 5px;

            transition: background-color 0.3s, color 0.3s;

        }



        .footer-button:hover {

            background-color: #ff4500;

            color: white;

        }





/*media queri per cell*/

/* Media Query per Smartphone (max-width: 600px) */

@media (max-width: 600px) {

    .footer-container, .footer-lower-container {

        flex-direction: column; /* Disporre le sezioni in colonna */

        align-items: center; /* Centrare il contenuto */

        text-align: center;

    }



    .footer-box {

        border-right: none; /* Rimuovi il bordo di separazione */

        margin-bottom: 10px; /* Spazio tra i box */

    }



    .footer-left {

        align-items: center; /* Centrare i contenuti */

    }



    .footer-left p {

        text-align: center;

    }



    .footer-left .social-icons {

        justify-content: center; /* Centrare le icone */

        gap: 15px; /* Ridurre la distanza tra le icone */

    }



    .footer-right {

        flex-direction: column; /* Disporre i contenuti in colonna */

        align-items: center;

        gap: 10px; /* Spazio tra le sezioni */

    }



    .footer-right ul {

        text-align: center;

    }

}



/* Media Query per Tablet (min-width: 601px e max-width: 1024px) */

@media (min-width: 601px) and (max-width: 1024px) {

    .footer-container, .footer-lower-container {

        flex-wrap: wrap; /* Permetti ai contenuti di andare a capo */

        gap: 20px; /* Spazio tra le sezioni */

    }



    .footer-box {

        flex: 1 1 50%; /* Due colonne su tablet */

        margin-bottom: 10px;

    }



    .footer-left {

        align-items: flex-start; /* Allinea a sinistra */

        text-align: left;

    }



    .footer-left p {

        text-align: left;

    }



    .footer-left .social-icons {

        justify-content: flex-start; /* Allinea a sinistra */

        gap: 20px; /* Mantieni lo spazio tra le icone */

    }



    .footer-right {

        justify-content: space-evenly; /* Distribuisci uniformemente */

    }



    .footer-right ul {

        text-align: left;

    }

}